var totalGroups = '4';

var group1 = '7/Devika<br>Sondhi/Jyotika<br>Dora/Priyanka<br>Kumar/Priyanshu<br>Gupta/Ruchika<br>Kohli/Sakshi<br>Saini/Shipra<br>Behera/Tanya<br>Mishra/Owner:<br>Ruchika<br>Kohli';
var group2 = '8/Jatin<br>Thapar/Abhishek<br>Sharma/Lakshay<br>Bharti/Himanshu<br>Gargas/Ankit<br>Mittal/Lokesh<br>Garg/Mayank<br>Gautam/Karan<br>Khurana/Owner:<br>Jatin<br>Thapar';
var group3 = '7/Akanksha/Jahnavi<br>Kalyani/Aditi<br>Lal/Anulima<br>Chaudhary/Aarti<br>Chand/Prachi<br>Aggarwal/Adesh/Owner:<br>Adesh';
var group4 = '8/Abhmanyu<br>Khanna/Akkineni<br>A. Krishna/Akshit<br>Gupta/Digvijay<br>Singh/Kunal<br>Mehta/Nikhil<br>Kumar/Shubham<br>Singhal/Saurav<br>Yadav/Owner:<br>Saurav<br>Yadav';
var group5 = '8/Jatin<br>Thapar/Abhishek<br>Sharma/Lakshay<br>Bharti/Himanshu<br>Gargas/Ankit<br>Mittal/Lokesh<br>Garg/Mayank<br>Gautam/&nbsp;<br>&nbsp;/Owner:<br>Jatin<br>Thapar';
var group6 = '8/Jatin<br>Thapar/&nbsp;<br>&nbsp;/&nbsp;<br>&nbsp;/&nbsp;<br>&nbsp;/&nbsp;<br>&nbsp;/&nbsp;<br>&nbsp;/&nbsp;<br>&nbsp;/&nbsp;<br>&nbsp;/Owner:<br>Jatin<br>Thapar';
var group7 = '8/Jatin<br>Thapar/Abhishek<br>Sharma/Lakshay<br>Bharti/Himanshu<br>Gargas/Ankit<br>Mittal/Lokesh<br>Garg/Mayank<br>Gautam/Karan<br>Khurana<br>(Req.)/Owner:<br>Jatin<br>Thapar';

// format id/top/left

var unEnrolledList = '<br>Akshay Gupta<br>Sushant Mehta<br>Paritosh Mittal<br>Akshay Rajvanshi<br>Amol Verma<br>Anirudh Chakravorty<br>Ankur Goel<br>Anmol Kelkar<br>Apoorv Narang<br>Apoorv Saini<br>Arjun Ahuja<br>Arpit Anand<br>Astha Solanki<br>Ayushi Goyal<br>Ayushi Aggarwal';

var size8 = [ '1/5/0', '2/3/19', '3/18/27', '4/32/19', '5/32/0', '6/7/-19',
		'7/-36/-27', '8/-77/-19', '8/-65/0' ];

var size7 = [ '1/5/0', '2/10/21', '3/31/27', '4/43/11.5', '5/30/-11.5',
		'6/-10/-27', '7/-57/-22', '8/-50/0' ];

var x = 1;

function unenrolled() {
	document.getElementById("group").style.display='none';
	var div = document.getElementById("group1");
	div.style.display = 'block';
	div.innerHTML = unEnrolledList;
	div.style.color='black';
}

function joinGroup() {
	reply = confirm("Do you want to join this group?");
	if (reply == true) {
		displayImage(8);
	}
}

function allowDrop(ev) {
	ev.preventDefault();
}

function drop(ev) {
	ev.preventDefault();
	window.confirm('Request to join this Group?');
	displayImage(8);
}

function disp1(id) {
	if (id == 7) {
		document.getElementById("Button1").style.display = 'block';
	} else {
		document.getElementById("Button1").style.display = 'none';
	}
	var group = '';
	switch (id) {
	case 1:
		group = group1;
		break;
	case 2:
		group = group2;
		break;
	case 3:
		group = group3;
		break;
	case 5:
		group = group4;
		break;
	case 6:
		group = group5;
		break;
	case 7:
		group = group6;
		break;
	}
	var groups;
	groups = group.split('/', 15);
	var div = document.getElementById("group");
	div.style.display = 'block';
	div.style.backgroundImage = "url(groupimages/grpsize" + groups[0] + ".png)";
	displayName(groups);
}

function displayImage(id) {

	document.getElementById("group1").style.display='none';
	var group = '';
	switch (id) {
	case 1:
		group = group1;
		break;
	case 2:
		group = group2;
		break;
	case 3:
		group = group3;
		break;
	case 5:
		group = group4;
		break;
	case 6:
		group = group5;
		break;
	case 7:
		group = group6;
		break;
	case 8:
		group = group7;
		break;
	}
	var groups;
	groups = group.split('/', 15);
	var div = document.getElementById("group");
	div.style.display = 'block';
	div.style.backgroundImage = "url(groupimages/grpsize" + groups[0] + ".png)";
	displayName(groups);
}

function displayName(groups) {
	var i = 1;
	var layout = '';
	for (i = 1; i <= groups[0]; i++) {
		switch (groups[0]) {
		case '2':
			layout = size2[i - 1].split('/', 3);
			break;
		case '3':
			layout = size3[i - 1].split('/', 3);
			break;
		case '4':
			layout = size4[i - 1].split('/', 3);
			break;
		case '5':
			layout = size5[i - 1].split('/', 3);
			break;
		case '6':
			layout = size6[i - 1].split('/', 3);
			break;
		case '7':
			layout = size7[i - 1].split('/', 3);
			break;
		case '8':
			layout = size8[i - 1].split('/', 3);
			break;
		case '9':
			layout = size9[i - 1].split('/', 3);
			break;
		case '10':
			layout = size10[i - 1].split('/', 3);
			break;

		}
		obj = document.getElementById("p" + i);
		obj.style.top = "" + layout[1] + "%";
		obj.style.left = "" + layout[2] + "%";
		obj.style.display = 'block';
		if (groups[i].split("<br>").length == 1) {
			groups[i] = "&nbsp;<br>" + groups[i];
		}
		obj.innerHTML = groups[i];
	}
	switch (groups[0]) {
	case '2':
		layout = size2[i - 1].split('/', 3);
		break;
	case '3':
		layout = size3[i - 1].split('/', 3);
		break;
	case '4':
		layout = size4[i - 1].split('/', 3);
		break;
	case '5':
		layout = size5[i - 1].split('/', 3);
		break;
	case '6':
		layout = size6[i - 1].split('/', 3);
		break;
	case '7':
		layout = size7[i - 1].split('/', 3);
		break;
	case '8':
		layout = size8[i - 1].split('/', 3);
		break;
	case '9':
		layout = size9[i - 1].split('/', 3);
		break;
	case '10':
		layout = size10[i - 1].split('/', 3);
		break;
	}
	obj = document.getElementById('manager');
	obj.style.top = "" + layout[1] + "%";
	obj.style.left = "" + layout[2] + "%";
	obj.style.display = 'block';
	if (groups[groups.length - 1].split("<br>").length == 2) {
		groups[groups.length - 1] = "&nbsp;<br>" + groups[groups.length - 1];
	}
	obj.innerHTML = groups[groups.length - 1];
	for (i; i <= 10; i++) {
		obj = document.getElementById("p" + i);
		obj.style.display = 'none';
	}
}